import React, { useState, useEffect, useCallback } from 'react'
import { Form, Input, Button, Checkbox, Row, Col } from 'antd'
import CryptoJS from 'crypto-js'
import { connect } from 'react-redux'
import { Redirect } from 'react-router-dom'
import girl from '../../assets/login_left.svg'
import boy from '../../assets/login_right.svg'
import { getCaptcha, verifyCaptcha } from '../../api/user'
import { loginAsyncActionCreator } from '../../actions/user'
import './login.less'

function Login(props) {
  // 验证码状态数据
  const [captcha, setCaptcha] = useState('')

  // 获取验证码
  useEffect(() => {
    getCaptcha()
      .then(data => {
        setCaptcha(data.captcha)
      })
  }, [])

  // 点击换一个验证码
  const changeCaptcha = useCallback(() => {
    getCaptcha()
      .then(data => {
        setCaptcha(data.captcha)
      })
  }, [])

  // 验证码校验
  const verifyCode = useCallback(event => {
    console.log('失去焦点...', event)
    verifyCaptcha(event.target.value)
      .then(data => {
        console.log('验证：', data)
      })
  }, [])

  // 点击登录，提交表单
  const onFinish = useCallback(({username, password}) => {
    // 前端实现对密码进行 MD5 编码处理
    const hash = CryptoJS.MD5(password).toString()

    // 调用属性中接收到的 login 实现登录，并保存状态数据
    props.login({username, password: hash})
  }, [])

  return props.token ? <Redirect to="/" /> : (
    <div className="login">
      <div className="login-side">
        <img src={girl} alt="" />
      </div>
      <div className="login-form">
        <div className="login-form-content">
          <div className="login-form-title">
            <p className="title">用户登录</p>
            <p className="subtitle">医疗服务后台管理系统</p>
          </div>
          <Form
            wrapperCol={{
              span: 18,
              offset: 3,
            }}
            initialValues={{
              username: 'admin',
              password: '123456',
              captcha: '1234',
              remember: true,
            }}
            onFinish={onFinish}
            autoComplete="off"
          >
            <Form.Item
              name="username"
              rules={[
                {
                  required: true,
                  message: '请输入用户名！',
                },
              ]}
            >
              <Input addonBefore="账　号" />
            </Form.Item>

            <Form.Item
              name="password"
              rules={[
                {
                  required: true,
                  message: '请输入密码！',
                },
              ]}
            >
              <Input.Password addonBefore="密　码" />
            </Form.Item>

            <Form.Item style={{marginBottom: 0}}>
              <Row>
                <Col span={14}>
                  <Form.Item
                    name="captcha"
                    rules={[
                      {
                        required: true,
                        message: '请输入验证码！',
                      },
                    ]}
                  >
                    <Input addonBefore="验证码" onBlur={verifyCode} />
                  </Form.Item>
                </Col>
                <Col span={10}>
                  <div
                    className="login-form-captcha"
                    dangerouslySetInnerHTML={{__html: captcha}}
                    onClick={changeCaptcha}
                  >
                  </div>
                </Col>
              </Row>
            </Form.Item>

            <Form.Item
              name="remember"
              valuePropName="checked"
            >
              <Checkbox style={{color: '#fff'}}>记住用户</Checkbox>
            </Form.Item>

            <Form.Item>
              <Button
                type="primary"
                htmlType="submit"
                size="large"
                block
                style={{backgroundColor: 'rgba(255, 145, 56, 1)', color: '#fff'}}
              >登录</Button>
            </Form.Item>
          </Form>
        </div>
      </div>
      <div className="login-side">
        <img src={boy} alt="" />
      </div>
    </div>
  )
}

const mapStateToProps = state => ({
  token: state.user.token,
})
// mapDispatchToProps 可以是对象或函数的结构，如果是对象结构，则
// 直接会将对象的各属性合并到包裹组件的 props 中，如果是函数，则将
// 函数返回的对象中各属性合并到包裹组件的 props 中
const mapDispatchToProps = {
  login: loginAsyncActionCreator,
}

export default connect(mapStateToProps, mapDispatchToProps)(Login)
